<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JS创建虚拟DOM</title>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <div id="test"></div>           <!-- 第一种情况 -->
    <div id="test2"></div>          <!-- 第二种情况 -->
    <script type="text/javascript">
        // <1> 第一种情况 创建普通h1带有id属性为title的标签 内容体为 hello,world
        // 1.创建虚拟DOM
        // const VDOM = React.createElement(标签名,标签属性,标签内容)               ===>document 带有创建元素的createElement 方法 React 也带有同功能同名字的方法
        const VDOM = React.createElement('h1',{id:'title'},'Hello,React')
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        // <2> 第二种情况 创建 <h1 id="title">
        //                          <span> hello,react</span>                     ===> 用来对比JSX语法和JS语法,突出JSX语法的便利性
        //                    </h1>
        const VDOM2 = React.createElement('h1',{id:'title'},React.createElement('sapn',{},'hello,world'))
        ReactDOM.render(VDOM2,document.getElementById('test2'))



        // 总结陈词  JSX的诞生 就是用来结局第二种情况下的嵌套问题  
    </script>
</body>
</html>